<template>
  <div class="login-container">
    <section class="header-container">
      <img src="../../assets/images/login/company.png" />
    </section>
    <div class="login-box">
      <div class="login-content-form">
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
          label-position="left"
        >
          <div class="title-container">
            <span class="title">后台管理系统</span>
          </div>

          <div class="login-form-item-box">
            <el-form-item prop="username" class="login-form-item">
              <el-input v-model="loginForm.username" placeholder="请输入用户名">
                <template #prefix>
                  <el-icon class="svg-container"><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password" class="login-form-item">
              <el-input
                :key="passwordType"
                v-model="loginForm.password"
                :type="passwordType"
                placeholder="请输入密码"
                @keyup.enter.native="handleLogin"
              >
                <template #prefix>
                  <el-icon class="svg-container"><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <div class="login-form-check">
              <el-checkbox v-model="checked">记住密码</el-checkbox>
            </div>

            <el-button
              :loading="loading"
              type="primary"
              class="login-btn-box"
              @click.native.prevent="handleLogin"
            >
              登录
            </el-button>
          </div>
        </el-form>
        <div class="copy-right-box">
          Copyright © 2018-2020 广东蓝聘网络科技有限公司 粤ICP备18085259号</div
        >
      </div>
    </div>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router'
  import { reactive, toRefs, ref } from 'vue'
  const validateUsername = (rule, value, callback) => {
    if (value == '' || value == undefined) {
      return callback(new Error('请输入用户名'))
    } else {
      return callback()
    }
  }
  const validatePassword = (rule, value, callback) => {
    if (value == '' || value == undefined) {
      return callback(new Error('请输入密码'))
    } else if (value.length < 6 || value.length > 16) {
      return callback(new Error('密码长度位6-16位'))
    } else if (value.indexOf(' ') >= 0) {
      return callback(new Error('密码中不能有空格字符'))
    } else if (/[\u4e00-\u9fa5]+/.test(value)) {
      return callback(new Error('密码不能包含中文'))
    } else {
      return callback()
    }
  }

  let loginFormRef = ref(null)
  const loginState = reactive({
    loginForm: {
      username: 'admin',
      password: '123456'
    },
    loading: false,
    passwordType: 'password',
    checked: true
  })

  const loginRules = reactive({
    username: [{ required: true, trigger: 'blur', validator: validateUsername }],
    password: [{ required: true, trigger: 'blur', validator: validatePassword }]
  })

  const router = useRouter()
  const handleLogin = () => {
    loginFormRef.value.validate((valid) => {
      if (!valid) {
        return false
      }
      loginState.loading = true
      router.push({ path: '/' })
    })
  }
  const { loginForm, loading, passwordType, checked } = toRefs(loginState)
</script>

<style lang="scss" scoped>
  $bg: #e6f2fa;
  $light_gray: #3cafff;
  .login-container {
    position: relative;
    background-color: #e6f2fa;
    display: flex;
    flex-direction: column;
    width: 100%;
    .header-container {
      background: url(../../assets/images/login/banner.png) no-repeat;
      display: flex;
      justify-content: center;
      height: 400px;
      background-size: 100% 400px;
      > img {
        margin-top: 120px;
        width: 488px;
        height: 78px;
      }
    }
    .login-box {
      height: calc(100vh - 400px);
      .login-content-form {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: $bg;
        .login-form {
          position: absolute;
          top: 300px;
          left: 0px;
          right: 0px;
          margin: auto;
          background: #fff;
          width: 426px;
          max-width: 100%;
          overflow: hidden;
          border-radius: 6px;
          .title-container {
            display: flex;
            justify-content: center;
            position: relative;
            .title {
              font-size: 28px;
              padding-top: 40px;
              padding-bottom: 32px;
              color: $light_gray;
              text-align: center;
              font-weight: bold;
            }
          }

          .login-form-item-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            .login-form-item {
              width: 330px;
              height: 48px;
            }
            .login-form-check {
              display: flex;
              align-items: center;
              width: 330px;
              margin-bottom: 18px;
              justify-content: flex-end;
            }
            .login-btn-box {
              width: 330px;
              margin-bottom: 40px;
            }
          }
        }
        .copy-right-box {
          margin-top: 300px;
          width: 100%;
          text-align: center;
          font-size: 14px;
          color: #a4aab3;
        }
      }
    }
    .svg-container {
      color: $light_gray;
      vertical-align: middle;
      display: inline-block;
    }
  }
</style>
